<template>
    <div class="container">
        <div class="nav" ref="trainingNavRef">
            <div class="training-room flag" :class="(addActive) ? 'active' : 'training-room flag'">
                <p @click="toRoom">练习室</p>
                <div class="icon" @click="toRoom">
                    <div v-if="showRoom === 'none'" class="right">
                        <img src="@/assets/icons/right.png">
                    </div>
                    <div v-else class="bottom">
                        <img src="@/assets/icons/bottom.png">
                    </div>
                </div>
                <div :class="showRoom === 'block' ? 'myroom' : ''" @click="addActive = true">
                    <router-link to="/home/training/myroom" :style="{display: showRoom}" ref="myRoomRef">
                        <span>我的练习室</span>
                        
                    </router-link>
                </div>
            </div>
            
            <div class="media-cache flag">
                <router-link to="/home/training/mediaCache">
                    <p>缓存</p>
                </router-link>
            </div>
            <div class="audio-library flag">
                <a @click="showLayer = 'block'">
                    <p>音频库</p>
                </a>
            </div>
            <div class="collections flag">
                <router-link to="/home/training/collections">
                    <p>收藏</p>
                </router-link>
            </div>
            <div class="view-records flag">
                <router-link to="/home/training/view_records">
                <p>历史</p>
            </router-link>
            </div>
        </div>

        <div class="content">
            <router-view></router-view>
        </div>
    </div>
    <div class="layer" :style="{display: showLayer}">
        <div class="content">
            <div class="desc">请打开中舞网APP，点击"练习室"-"音频库"中查看。</div>
            <div class="btn">
                <button @click="showLayer = 'none'">确定</button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    export default {
        name: 'Training'
    }
</script>

<script setup lang="ts">
    import { getCurrentInstance, onMounted, ref, type ComponentInternalInstance } from 'vue';

    const trainingNavRef = ref();

    const showLayer = ref('none' || undefined);
    const showRoom = ref('block' || undefined);
    const addActive = ref(true);

    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    const path = proxy?.$router.currentRoute.value.path;
    if ( path !== '/home/training/myroom' ) {
        proxy?.$router.push('/home/training/myroom')
    }

    const toRoom = () => {
        if (showRoom.value === 'block') {
            showRoom.value = 'none';
        } else {
            showRoom.value = 'block';
        }
    }

    const clickHandler = () => {
        const navList = trainingNavRef.value.children;
        for (let i = 0; i < navList.length; i++) {
            if (navList[i].classList.contains('flag')) {
                if (navList[i].classList.contains('training-room')) {
                    // 不做任何处理
                } else {
                    navList[i].onclick = function () {
                        showRoom.value = 'none';
                        addActive.value = false;
                    }
                }
                
            } 
        }
    }
    onMounted(() => {
        clickHandler();
    })

</script>

<style scoped>
  * {
    padding: 0;
    margin: 0;
  }
.container {
  display: flex;
  width: 1200px;
  margin: 0 auto;
  margin-top: 20px;
}
.container .nav {
  width: 170px;
  margin-right: 10px;
}
.container .nav .flag {
  background-color: #fff;
}
.container .nav .training-room {
  position: relative;
  padding: 12px 0;
  margin-bottom: 10px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}
.container .nav .training-room p {
  padding: 10px 21px;
  border-left: 4px solid #fff;
}
.container .nav .training-room .icon {
  position: absolute;
  top: 22px;
  right: 21px;
}
.container .nav .training-room .icon img {
  width: 15px;
  height: 15px;
}
.container .nav .training-room .myroom {
  font-size: 14px;
  background-color: #fff;
  cursor: pointer;
}
.container .nav .training-room .myroom a {
  padding: 12px 0 12px 49px;
  border-left: 4px solid #fff;
}
.container .nav .training-room .myroom a:hover {
  color: #f93684;
}
.container .nav .training-room .a-color {
  color: #f93684;
}
.container .nav div:not(.training-room) a {
  padding: 7px 0;
  font-size: 14px;
}
.container .nav div:not(.training-room) a p {
  padding: 10px 21px;
  border-left: 4px solid #fff;
}
.container .nav div a:visited {
  color: #000;
}
.container .nav .media-cache {
  padding-top: 5px;
  border-radius: 5px 5px 0 0;
}
.container .nav .view-records {
  padding-bottom: 5px;
  border-radius: 0 0 5px 5px;
}
.container .nav .router-link-active p {
  border-left-color: #f93684 !important;
}
.container .nav .router-link-active span {
  color: #f93684;
}
.container .nav .active p {
  border-left-color: #f93684 !important;
}
.container .nav .flag:hover p {
  border-left-color: #f93684 !important;
}
.container .content {
  width: 1020px;
}
.container a {
  color: #000;
  text-decoration: none;
}
.layer {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(116, 116, 116, 0.6);
  top: 0;
}
.layer .content {
  position: absolute;
  box-sizing: border-box;
  width: 420px;
  height: 118px;
  padding-bottom: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 5px;
}
.layer .content .desc {
  padding: 35px 15px 10px;
  font-size: 14px;
}
.layer .content .btn {
  width: 390px;
  height: 32px;
  padding: 5px 15px 0;
  text-align: right;
}
.layer .content .btn button {
  width: 56px;
  height: 100%;
  background-color: #f93684;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
}

</style>